CASE STUDY — 01 / 05
A Portland, Maine construction and property dispute firm. Their clients arrive overwhelmed — water intrusion, failed repairs, insurance denials. The site's one job: make that mess feel like it can become an organized, winnable case.
THREE DECISIONS — WRITTEN FOR OWNERS, VERIFIABLE BY DEVELOPERS
01
Pages are organized like a case file — water intrusion, defect, failed repair, insurance denial, lien — and the intake asks for documents, photos, and a timeline. The first phone call starts organized instead of starting over.
02
The whole palette lives in CSS custom properties and swaps automatically with the visitor's system preference. Two full color schemes, zero duplicated component CSS — nothing to drift out of sync.
03
Fraunces on a fluid clamp() type scale — six steps from small print to display. It reads like considered print work, not a legal-directory template, and it scales without a single media-query breakpoint.
0
FRAMEWORKS, ZERO BUILD STEP
2
COLOR SCHEMES, ONE TOKEN LAYER
6
FLUID TYPE STEPS, NO BREAKPOINTS
'26
LAUNCHED — RESULTS BEING MEASURED
People searching for a construction-dispute lawyer are usually mid-crisis: a wall is wet, a contractor stopped answering, an insurer said no. Most firm websites answer with credentials. This one answers with a path — what kind of matter is this, what should you gather, what happens next.
That framing does double duty: it calms the visitor, and it means the firm's first consultation starts with organized facts instead of a shoebox of paper.
The page is a single HTML document with tokens declared at the top of one stylesheet. Dark mode is a media-query token swap, not a second theme. Type is a clamp()-based fluid scale, so it holds from phone to widescreen with no breakpoint forest.
Nothing to npm-install, nothing to expire. A firm this size should be able to host their site anywhere for a decade — so it's built that way.
CLIENT NOTE — PLACEHOLDER, SWAP IN THE REAL QUOTE
“One or two sentences in the client's own words — clearer inquiries, an easier process, or the site paying for itself.”
CLIENT NAME · BUSINESS